<script setup>
import { ref } from 'vue'
let path = ref([])
let fileList = ref([])
let pathStr=sessionStorage.getItem('user')
for(let i=0;i<path.length;i++){
  pathStr=pathStr+"/"+path[i]
}
fetch('http://localhost:8080/file/list?path='+pathStr,{
      method: "GET"
  })
 .then(res => res.json())
 .then(data => {
    for(let i=0;i<data.length;i++){
      let type="文件夹";
      let arr=data[i].name.split(".")
      if(arr.length>1){
        type=arr[arr.length-1]
      }
      let size="--";
      if(data[i].file){
        size=(data[i].size/(1024*1024)).toFixed(2)+"MB"
      }
      fileList.value.push({
        name: data[i].name,
        size: size,
        type: type,
      })
    }
    console.log(data)
  })

  function download(name){
    console.log(name)
    window.open('http://localhost:8080/file/download?path='+pathStr+'&name='+name)
  }
</script>
<template>
<main>
  <div id="breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item >>> 我的文件</el-breadcrumb-item>
      <el-breadcrumb-item v-for="item in path">{{item}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider/>
  </div>
  <div id="file-list">
    <el-button text type="success">上传文件</el-button>
    <el-button text type="primary">新建文件夹</el-button>
    <el-table :data="fileList" style="width: 100%">
      <el-table-column  label="文件类型" width="100">
        <template #default="scope"><el-tag type="info">{{scope.row.type}}</el-tag></template>
      </el-table-column>
      <el-table-column prop="name" label="文件名称" width="300" />
      <el-table-column prop="size" label="文件大小" width="180" />
      <el-table-column  label="操作" width="400">
        <template #default="scope">
          <el-button v-if="scope.row.type=='文件夹'">打开</el-button>
          <el-button v-else type="primary" @click="download(scope.row.name)">下载</el-button>
          <el-button type="danger">删除</el-button>
      </template>
        
      </el-table-column>
  </el-table>
  </div>
</main>
</template>
<style scoped>
#breadcrumb {
  width: 100%;
  height: 60px;
}
#file-list {
  width: 100%;
  max-height: 500px;
  overflow-y: auto; /* 允许滚动条 */
}
</style>